<template>
  <div>
<Top><p>我的优惠</p></Top>
  <div class="nav"><div>红包</div> <div>商家代金券</div></div>
    <p>有三个红包即将过期   <span>红包说明</span></p>
    <div class="hongbao">
      <div>1元</div>
      <div><p>分享</p>
      <p>2017-05-23到期</p>
      <p>十几个了快速的讲故事了看到</p></div>
    </div>
    <div>剩余3日</div>

    <li data-v-841e3554="" class="hongbao_list_li">
      <section data-v-841e3554="" class="list_item">
        <div data-v-841e3554="" class="list_item_left">
          <span data-v-841e3554="">¥</span> <span data-v-841e3554="">1</span>
          <span data-v-841e3554="">.</span> <span data-v-841e3554="">0</span>
          <p data-v-841e3554="">满 20 元可用</p></div> <div data-v-841e3554="" class="list_item_right">
        <h4 data-v-841e3554="">分享红包</h4> <p data-v-841e3554="">2017-05-23到期</p> <p data-v-841e3554="">限收货手机号为 13681711254</p>
      </div> <div data-v-841e3554="" class="time_left">剩3日</div></section> <!---->
    </li>

  </div>
</template>

<script>
import Top from "@/components/Top";
export default {
name: "HongBao",
  components: {Top}
}
</script>

<style scoped>
.hongbao{
  display: flex;
  justify-content: space-between;
  padding: 1rem .5rem .8rem;
  background: #fff url() repeat-x;
  background-size: .5rem .2rem;
  margin-bottom: .5rem;
  border-radius: .25rem;
}
.hongbao_list_li{
  font-size: 22.5px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: 400;
  font-family: Microsoft Yahei;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  background: #fff url() repeat-x;
  background-size: .5rem .2rem;
  margin-bottom: .5rem;
  border-radius: .25rem;
}
.hongbao_container .hongbao_list_ul .hongbao_list_li .list_item[data-v-841e3554] {
  display: flex;
  justify-content: space-between;
  padding: 1rem .5rem .8rem;
}
.hongbao_container .hongbao_list_ul .hongbao_list_li .list_item .list_item_left[data-v-841e3554] {
  font-size: 0;
  border-right: .025rem dotted #ccc;
  flex: 1;
}
</style>